<template>
  <view class="settle-box">
    <!-- 全选按钮区域 -->
    <label class="select-all-box"
           @click="selectAllChange">
      <radio color="#c00000"
             :checked="selectAll" />
      <text>全选</text>
    </label>

    <!-- 总价区域 -->
    <view class="total-price-box">
      合计:
      <view class="total-price">
        ￥{{cartListSelectedPrice}}
      </view>
    </view>

    <!-- 结算按钮区域 -->
    <view class="settle-btn"
          hover-class="navigator-hover"
          @click="settleBtnClick">
      结算({{cartListSelectedTotal}})
    </view>
  </view>
</template>

<script>
  import { mapMutations, mapGetters } from 'vuex'

  export default {
    name: "my-settle",
    data() {
      return {

      };
    },
    computed: {
      ...mapGetters('m_cart', [
        'cartListSelectedTotal',
        'cartListSelectedPrice',
        'selectAll'
      ])
    },
    methods: {
      ...mapMutations('m_cart', ['selectAllChange']),
      /**
       * 结算按钮点击事件
       */
      settleBtnClick() {
        
      }
    }
  }
</script>

<style scoped
       lang="scss">
  .settle-box {
    height: 100rpx;
    width: 100%;
    padding-left: 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    position: fixed;
    /* #ifndef H5 */
    bottom: 0;
    /* #endif */
    /* #ifdef H5 */
    bottom: 50px;
    /* #endif */
    left: 0;
    font-size: 28rpx;

    .select-all-box {
      display: flex;
      align-items: center;
    }

    .total-price-box {
      display: flex;

      .total-price {
        color: #c00000;
        font-size: 30rpx;
        font-weight: 900;
      }
    }

    .settle-btn {
      width: 200rpx;
      height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #c00000;
      color: white;
    }
  }
</style>
